
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/failOrder">不合格订单处理</router-link></div>
          <div class="hei10"></div>
          
				<div class="title">不合格订单处理</div>
				<div class="failorder">
					<div class="failordercontent">
						<el-row>
							<el-col :span="6" style="float: right; margin: 20px 0;">
                                <el-upload class="upload-demo" action="/api/system/upload_pic_zip" :http-request="picgo"  :before-upload="shangchuanzip">
                                	<el-button type="primary">批量重传照片</el-button>
                                </el-upload>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div class="failorderccon">注：不合格订单的定义：7天内，照片审核失败和开卡失败的订单明细</div>
								<div class="failorderccon">1、订单退货，请及时点击放弃订单</div>
								<div class="failorderccon">2、7天以上的订单将自动作为放弃订单处理</div>
								<div class="failorderccon">3、批量重传照片要求，一个人一个文件夹，一个文件夹三张照片，多个文件夹合在一起打包压缩上传，格式.zip，大小40M内</div>
							</el-col>
						</el-row>
						<el-row class="table">
							<el-col :span="2"><div class="failli">订单ID</div></el-col>
							<el-col :span="2"><div class="failli">订单编号</div></el-col>
							<el-col :span="2"><div class="failli">产品名称</div></el-col>
							<el-col :span="3"><div class="failli">下单时间</div></el-col>
							<el-col :span="2"><div class="failli">订单状态</div></el-col>
							<el-col :span="3"><div class="failli">失败原因</div></el-col>
							<el-col :span="3"><div class="failli">联系电话</div></el-col>
							<el-col :span="3"><div class="failli">身份证号</div></el-col>
							<el-col :span="3"><div class="failli">操作</div></el-col>
						</el-row>
						<div class="loading" v-loading="loading">
							<el-row class="table2"  v-for="(item, i) in fileList" :key = "i">
								<el-col :span="2"><div class="failli">{{item.id}}</div></el-col>
								<el-col :span="2"><div class="failli">{{item.source_id}}</div></el-col>
								<el-col :span="2"><div class="failli">
									<el-tooltip popper-class="tooltip" effect="light" placement="top">
									  <div slot="content">{{item.product_sku}}</div>
									  <div>{{item.product_sku}}</div>
									</el-tooltip>
								</div></el-col>
								<el-col :span="3"><div class="failli">{{item.created_at}}</div></el-col>
								<el-col :span="2"><div class="failli">{{item.status_name}}</div></el-col>
								<el-col :span="3"><div class="failli chakan">
									<el-tooltip popper-class="tooltip" effect="light" placement="top">
									  <div slot="content">{{item.reason}}</div>
									  <div>{{item.reason}}</div>
									</el-tooltip>
								</div></el-col>
								<el-col :span="3"><div class="failli">{{item.address_mobile}}</div></el-col>
								<el-col :span="3"><div class="failli">{{item.id_card_num }}</div></el-col>
								<el-col :span="4">
									<el-button size="mini" @click="giveup(item.id)">放弃订单</el-button>
									<el-button size="mini" @click="seephoto(item.id,item.id_card_num)">查看</el-button>
								</el-col>
								
						</el-row>
						
						</div>
						<div class="fenye">
							<el-pagination background layout="total,prev, pager, next" @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="查看照片" :visible.sync="seephotolog" :before-close="seephotoclosed" width="1254px">
		  <span class="logflex">
			   <div class="proimg"><img :src="choose.face" /></div>
			   <div class="proimg"><img :src="choose.back" /></div>
			   <div class="proimg"><img :src="choose.hand" /></div>
			   <div class="protitle">
					<el-upload
					  class="upload-demo" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadok" :auto-upload="false">
					  <el-button size="small" type="primary" @click="fixchoose('face')">补充正面照片</el-button>
					</el-upload>
			   </div>
			   <div class="protitle">
				   <el-upload
				     class="upload-demo" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadok" :auto-upload="false">
				     <el-button size="small" type="primary" @click="fixchoose('back')">补充反面照片</el-button>
				   </el-upload>
			   </div>
			   <div class="protitle">
					<el-upload
					  class="upload-demo" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadok" :auto-upload="false">
					  <el-button size="small" type="primary" @click="fixchoose('hand')">补充免冠照片</el-button>
					</el-upload>
				</div>
		  </span>
		  <span slot="footer" class="dialog-footer">
		
			<el-button type="primary" @click="orderchange">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default {
		components: {
			"left": left,
			"top": top,
			"foot":foot
		},
		name: 'failOrder',
		data(){
			return{
				msg:"hello",
				log:false,
				disid:"",
				result:"",
				
				seephotolog:false,
				choose:{
					orderwho:"",
					orderid:"",
					cardid:"",
					face:"",
					back:"",
					hand:""
				},
				noshuju:false,
				fileList:[],
				pages:{
					sku:"",
					product_sku:"",
					_status:"",
					start:"",
					end:"",
					_page_size:20,
					_page:-1,
					total:0
				},
				loading: false,
                
                total:0,
                page:1,
                page_size:20,
			}
		},
		created() {
			this.getdingdan()
            console.log(this.$route.query.time)
		},
		mounted() {
			this.clientheight = document.documentElement.clientHeight;
		},
		methods:{
			search:function(){
				console.log(this.disid)
			},
			loggo:function(){
				console.log("b")
			},
            //修改订单状态
            orderchange:function(){
                var that = this
                axios.post('/api/plan-market/plan/photo/status', {id:this.choose.orderid})
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.seephotolog = false
                          that.loading = true
                          that.$message({
                            message: '已更改订单状态',
                            type: 'success'
                          });
                          that.getdingdan()
                      }
                  })  
            },
            
			
			
			seephotoclosed:function(){
				this.loading = true
				this.getdingdan()
				this.seephotolog = false
			},
			//查看照片 标记出选中的订单id等信息
			seephoto:function(orderid,cardid){
				this.choose.cardid = cardid
				this.choose.orderid = orderid
				var random = Math.random()
				this.choose.face = "/storage/upload/id_card_photo/"+cardid+"/face.jpg?v="+random
				this.choose.back = "/storage/upload/id_card_photo/"+cardid+"/back.jpg?v="+random
				this.choose.hand = "/storage/upload/id_card_photo/"+cardid+"/hand.jpg?v="+random
				this.seephotolog = true
			},
			//单个图片上传
			uploadok:function(file){
				console.log(file)
				var that = this;
				var formData = new FormData();
				formData.append("id_num",this.choose.cardid);
				formData.append("order_id",this.choose.orderid);
				formData.append("pic["+this.choose.orderwho+"]", file.raw);
				axios.post('/api/ROS/plan/photo/cut',formData)
					.then(response => {
						// 上传到服务器后 获取新图片并清除缓存
						var random = Math.random()
						that.choose.face = "/storage/upload/id_card_photo/"+that.choose.cardid+"/face.jpg?v="+random
						that.choose.back = "/storage/upload/id_card_photo/"+that.choose.cardid+"/back.jpg?v="+random
						that.choose.hand = "/storage/upload/id_card_photo/"+that.choose.cardid+"/hand.jpg?v="+random
					})
			},
			//点击上传某张
			fixchoose:function(fbh){
				this.choose.orderwho = fbh
			},
			
			
			giveup:function(id){
				var that = this;
				that.loading = true
				//获取订单
				var params = new URLSearchParams();
                params.append('id', id);
				params.append('status', 0);
				axios.post('/api/plan-market/order/abandon',params)
					.then(response => {
						that.opendelete();
						that.getdingdan()
					})
					
			},
			getdingdan:function(){
				var that = this;

				//获取订单status=150&status=-200
				axios.get('/api/gth/orders?status='+this.$route.query.status+'&_page='+that.page+'&_page_size='+that.page_size+'&start_time='+this.$route.query.time+' '+'00:00:00&end_time='+this.$route.query.time+' '+'23:59:59')
					.then(response => {
                        that.fileList = response.data.data.data
                        that.total = response.data.data.total
						that.loading = false
					})
			},
			opensucess:function(){
				this.$message({
				  message: '恭喜你，上传成功了！',
				  type: 'success'
				});
			},
			opendelete:function(){
				this.$message({
				  message: '订单放弃成功',
				  type: 'success'
				});
			},
            
			//翻页
			fanye:function(val){
				this.page = val
				this.loading = true
				this.getdingdan()
			},
            
			openbig:function(){
				this.$message.error('文件太大了，要么压缩一下，要么分几次上传吧！');
			},
			opennodata:function(){
				this.$message.error('没有更多数据了！');
			},
			
			opengeshi:function(){
				this.$message.error('格式不对，请调整一下格式');
			},
			shangchuanzip:function(file){
				if(file.type == "application/zip"){
					if(file.size > 1024*1024*50){
						this.openbig();
						return false
					}else{}
				}else{
					this.opengeshi();
					return false
				}
			},
			cuowu:function(){
				console.log("cuowu")
			},
			zhengque:function(){
				this.opensucess()
			},
            //照片上传
            picgo:function(file){
            	this.loading = true
            	var that = this
            	this.piczip = file.file
            	var params = new FormData();
            	params.append('file', this.piczip);
            	params.append('type', 1);
            	axios.post('/api/system/upload_pic_zip',params)
            		.then(response => {
            			
            			axios.get('/api/system/qiniu/upload_token?bucket=liubang')
            				.then(response => {
            				var qiniudata = new FormData();
            					qiniudata.append('file', that.piczip);
            					qiniudata.append('token',response.data);
            					axios.post('https://upload.qiniup.com',qiniudata)
            						.then(response => {
            							that.getlist()
            							that.opensucess()
            						})
            			})
            		})
            },
            //照片上传
            // picgo:function(file){
            
            // 	var that = this
            // 	this.piczip = file.file
            // 	var params = new FormData();
            // 	params.append('file', this.piczip);
            // 	axios.post('/api/system/upload_pic_zip',params)
            // 		.then(response => {
            // 			axios.get('/api/system/qiniu/upload_token?bucket=liubang')
            // 				.then(response => {
            // 				var qiniudata = new FormData();
            // 					qiniudata.append('file', that.piczip);
            // 					qiniudata.append('token',response.data);
            // 					axios.post('https://upload.qiniup.com',qiniudata)
            // 						.then(response => {
            // 							console.log(response)
            // 							that.opensucess()
            // 						})
            // 			})
            // 		})
            // },
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		
				.title{ line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
				.list{ 
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}
			
		
		.result{ margin-top: 20px;}
        .el-upload-list{ position: absolute; height: 100px; overflow: hidden;}
 
        
        .failordertitle{ color: #077ECE; font-size: 20px; margin: 10px 0;}
        .failordercontent{ background: #FFFFFF; width: 100%; }
        .failorderctitle{ color: #F24066; padding: 20px 30px; font-size: 22px;}
        .failorderccon{ color: #787878; font-size: 14px; padding: 0px 30px 20px;}
        .table{ text-align: center; font-size: 14px; background: #E5E5E5; color: #4D4D4D; padding: 20px 0;}
        .table2{ text-align: center; font-size: 14px; background: #FFFFFF; color: #666666; padding: 20px 0; border-bottom: 1px #A2A2A2 solid;}
        .chakan{ color: #F92659;}
        .fangqi{ color: #3B68FB; cursor: pointer;}
        .chongchuan{ margin-top: 20px;}
        .index-tgfanye {
        	display: flex;
        	padding: 40px 0;
        	justify-content: flex-end;
        	line-height: 40px;
        	color: #666666;
        	font-size: 16px;
        	background: #FFFFFF;
        }
        .failli{ line-height: 19px; height: 19px;  overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap}
        .index-tginput {
        	width: 65px;
        	margin-right: 15px;
        }
        
        .index-tgfanyeg {
        	margin-right: 15px;
        }
        
        .index-tgfanyet {
        	margin-right: 15px;
        }
        
        .index-tgfanyepre {
        	margin-right: 15px;
        	cursor: pointer;
        }
        
        .index-tgfanyenext {
        	margin-right: 15px;
        	cursor: pointer;
        }
        .logflex{ display: flex; justify-content: space-around; flex-wrap: wrap;}
        .logflex div{  width: 377px; text-align: center; }
        .logflex .proimg{ display: flex; justify-content: center; align-items: center; height: 400px; background: #EAEAEA;}
        .logflex .proimg img{ max-width: 100%; max-height: 100%;}
        .protitle{ color: #197CFF; cursor: pointer; margin-top: 20px;}
        .propipei{ padding-left: 90px; font-size: 14px; margin-bottom: 20px;}
        .propipei span{ margin: 0 10px; color: #FF5053;}
	}
</style>


